import React, {PureComponent} from "react";

class UsualTool extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            data: ["bejson", "Todo", "OpenApis", "md5&sha",
                "base64", "二维码", "取色器", "iconfont", "tinypng",
                "进制转化", "短链接", "速查", "正则", "URLOrder", "Studio3.0.2", "https检测"],
        };
    }

    render() {
        return (
            <div style={toolWrapperStyle}>
                <div style={toolTitleStyle}>
                    常用工具
                </div>
                <ul style={toolUlStyle}>
                    {
                        this.state.data.map((item, index) => {
                            const bgLiStyle = {
                                backgroundColor: `${bgColors[parseInt(Math.random() * bgColors.length)]}`,
                            };
                            return (
                                <li
                                    key={index}
                                    style={{...toolLiStyle, ...bgLiStyle}}>
                                    {item}
                                </li>
                            );
                        })
                    }
                </ul>
            </div>
        );
    }

}

export default UsualTool;

const bgColors = ["green", "red", "pink", "purple", "orange", "darkblue"];


const toolWrapperStyle = {
    width: "100%",
    height: 310,
    marginTop: 30,
    backgroundColor: "white",
    boxShadow:"2px 2px 2px #ccc",
    borderRadius:4,
};

const toolTitleStyle = {
    width: "100%",
    height: 42,
    lineHeight: "42px",
    borderBottom: "solid 2px #8db5d0",
    paddingLeft:10,
    color: "#333",
    fontSize:16,
    boxSizing:"border-box",
};

const toolUlStyle = {
    width: "100%",
    marginLeft:16,
    paddingBottom: 16,
};

const toolLiStyle = {
    display: "block",
    height: 25,
    lineHeight: "25px",
    textAlign: "center",
    color: "white",
    float: "left",
    marginTop:16,
    marginRight:14,
    padding: 4,
    borderRadius: 4,
    cursor:"pointer",
    fontSize: 14,
};



